<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结算</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- <link rel="stylesheet" href="../../font/iconfont.css" /> -->
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/vant.min.js"></script>
		<script type="text/javascript" src="../../js/ajax.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/listener_other.js" type="text/javascript" charset="utf-8"></script>
		<style>
			header,footer{
				text-align: center;
				height: 46px;
				line-height: 46px;
			}
			section{
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow-y: scroll;
			}
			body {
				background-color: #E5E5E5;
			}
			#app {
				margin-top: 46px;
			}
			.margin-top {
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">结算</label>
				</van-nav-bar>
			</header>
			<section>
				<van-badge-group class="margin-top">
					<van-badge title="商品清单"></van-badge>
				</van-badge-group>

				<ul>
					<li style="font-family: '宋体';">
						<van-row>
							<van-col span="24">
								<van-card :num="1" :price="list.RealPrice" :title="list.Name" :thumb="list.CoverImage" />
							</van-col>
						</van-row>
					</li>
				</ul>

				<van-badge-group class="margin-top">
					<van-badge title="收货地址"></van-badge>
				</van-badge-group>

				<van-cell-group>
					<van-field v-model="username" clearable label="联系人" placeholder="请输入联系人"></van-field>
					<van-field v-model="phone" clearable label="手机号码" placeholder="请输入手机号"></van-field>
					<van-field v-model="address" clearable label="详细地址" placeholder="请输入详细地址"></van-field>
				</van-cell-group>

				<van-badge-group class="margin-top">
					<van-badge title="支付方式"></van-badge>
				</van-badge-group>

				<van-radio-group v-model="radio">
					<van-cell-group>
						<van-cell title="支付宝" clickable @click="radio = '1'">
							<van-radio name="1" />
						</van-cell>
						<van-cell title="微信" clickable @click="radio = '2'">
							<van-radio name="2" />
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</section>
			<footer>
				<van-submit-bar :price="sum" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
			</footer>
		</div>
	</body>
<script>
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
		console.log(newUser); //用户信息
		var vm = new Vue({
			el: "#app",
			data: {
				list: [],//商品数组
				username: "",//用户名
				phone: "",//用户手机号
				address: "",//默认地址
				radio: "1",//单选框
				sum:1//合计总价
			},
			created: function() {
				var _this = this;
				var w = plus.webview.currentWebview();
				_this.gId=w.ID;
				ajax({ //请求产品数据
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: w.ID
					},
					success: function(res) {
						_this.list = res;
						console.log(res);
					}
				})
				console.log(_this.list);
				_this.username = newUser.UserData.NickName;
				_this.phone = newUser.UserData.Phone;
				_this.address = newUser.UserData.CityName + newUser.UserData.DistrictName + newUser.UserData.ProvinceName;				
			},
			methods: {
				onClickLeft: function() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				onSubmit:function(){//提交订单
					var _this = this;
					console.log(newUser.Key);
					ajax({ //支付
						url: "http://dsapi.ysd3g.com/api/OrderPay",
						dataType: "jsonp",
						data: {
							key: newUser.Key, //登陆返回的Key
							oId: localStorage.getItem('orderId'), //订单Id
							payType: '1', //可以写死支付宝
							addressIdx: "", //可为空,收货地址
							moey: "0.01" //总价,随意写
						},
						success: function(res) {
							if (res.Error) {
								alert(res.Msg)
							} else {
								var payment = "";
								plus.payment.getChannels(function(s) {
									console.log(s);
									plus.payment.request(s[0], res.strJson, function() {
										vm.$toast.alert("支付操作成功！");
										localStorage.removeItem(orderId);
									},function(e){
										console.log(e);
										_this.$toast.fail(e.message);
									})
								},function(){
									console.log(123)
									vm.$toast.alert("出现错误，请稍后再试！")
								})
							}
							console.log(res);
						}
					});
				}
			}
		})
	</script>
</html>